<template>
  <div class="home-product-recommend">
    <item-title title="畅销好物" more-text="更多好物" more-url="/product/list" v-if="false" />
    <ul class="list">
      <li v-for="(item, index) in home.recommend" :key="index" class="list-item" @click="handleClick(item)">
        <div class="image">
          <img v-lazy="item.mainImage.path" v-if="item.mainImage && item.mainImage.path" />
        </div>
        <div class="desc">
          <p class="title">{{ item.title }}</p>
          <p class="price_old">{{ item.title_sub }}</p>
          <p class="price">￥{{ +item.price }}</p>
          <p class="button">立即购买</p>
        </div>
      </li>
    </ul>
    <div v-if="false" class="more" @click="$router.push('/product/list')">点击查看更多好物...</div>
  </div>
</template>

<script>
import ItemTitle from './_ItemTitle'
export default {
  name: 'HomeProductRecommend',
  props: ['home'],
  components: {
    ItemTitle
  },
  data() {
    return {
    }
  },
  methods: {
    handleClick(item) {
      this.$router.push(`/product/detail/${item.id}`)
    }
  }
}
</script>

<style scoped lang="stylus">
.home-product-recommend
  margin 0 10px
  //background red
  .list
    .list-item
      display flex
      background white
      margin 7.5px 0
      border-radius 5px
      padding 10px
      .image
        width 120px
        height 120px
        padding 5px
      .desc
        flex 1
        text-align left
        position relative
        margin-top 10px
        .title
          line-height 20px
          font-weight 700
          font-size 14px
        .price_old, .price
          //height 25px
          line-height 18px
        .price
          //color $second_color
          color red
          font-weight 700
          font-size 16px
          height 40px
          line-height 40px
        .price_old
          color #808080
          //text-decoration line-through
        .button
          position absolute
          background $main_color
          color white
          padding 7.5px 15px
          right 0
          bottom 0
          border-radius 15px
          letter-spacing 1.2px
          font-weight 500
  .more
    margin 10px 0
    background white
    height 35px
    line-height 35px
    border-radius 10px
    letter-spacing 1px
</style>
